<template>
    <div class="recomhotel">
        <div class="recomhotel-header">
            <div class="recomhotel-header-bottom-true" id="people" @click="onPeopleBtn">
                <span>人气排行</span>
            </div>
            <div class="recomhotel-header-bottom-false" id="price" @click="onPriceBtn">
                <span>价格排行</span>
            </div>
        </div>
        <div class="recomhotel-body">
            <div>
                <img src="../../../../assets/jdtp01.png" alt="">
                <div class="recomhotel-main-list">
                    <div>
                        桔子酒店精选
                    </div>
                    <div>
                        商务出行
                    </div>
                    <div>
                        <van-rate v-model="value" disabled /> <span>4.8分</span>
                    </div>
                    <div class="recomhotel-main-list-bottom">
                        <p>距离<span>20.3</span>km</p>
                        <p>&#165;<span>660</span>/起</p>
                    </div>
                </div>
            </div>
            <div>
                <img src="../../../../assets/jdtp02.png" alt="">
                <div class="recomhotel-main-list">
                    <div>
                        成都榛悦隆堡酒店
                    </div>
                    <div>
                        地铁周边
                    </div>
                    <div>
                        <van-rate v-model="value" disabled /> <span>4.7分</span>
                    </div>
                    <div class="recomhotel-main-list-bottom">
                        <p>距离<span>25.6</span>km</p>
                        <p>&#165;<span>440</span>/起</p>
                    </div>
                </div>
            </div>
            <div>
                <img src="../../../../assets/jdtp03.png" alt="">
                <div class="recomhotel-main-list">
                    <div>
                        如家精选酒店
                    </div>
                    <div>
                        停车方便
                    </div>
                    <div>
                        <van-rate v-model="value" disabled /> <span>4.6分</span>
                    </div>
                    <div class="recomhotel-main-list-bottom">
                        <p>距离<span>17.8</span>km</p>
                        <p>&#165;<span>230</span>/起</p>
                    </div>
                </div>
            </div>
            <div>
                <img src="../../../../assets/jdtp04.png" alt="">
                <div class="recomhotel-main-list">
                    <div>
                        成都海洋莱普敦酒店
                    </div>
                    <div>
                        购物方便
                    </div>
                    <div>
                        <van-rate v-model="value" disabled /> <span>4.5分</span>
                    </div>
                    <div class="recomhotel-main-list-bottom">
                        <p>距离<span>12.3</span>km</p>
                        <p>&#165;<span>360</span>/起</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                value:5
            }
        },
        methods:{
            onPeopleBtn(){
                let value01 = document.getElementById('people');
                let value02 = document.getElementById('price');
                if (value01.className === "recomhotel-header-bottom-false"){
                    value01.className = "recomhotel-header-bottom-true";
                    value02.className = "recomhotel-header-bottom-false"
                }
            },
            onPriceBtn(){
                let value01 = document.getElementById('people');
                let value02 = document.getElementById('price');
                if (value02.className === "recomhotel-header-bottom-false"){
                    value02.className = "recomhotel-header-bottom-true";
                    value01.className = "recomhotel-header-bottom-false"
                }
            }
        }
    }
</script>

<style>
    .recomhotel-header{
        height: 90px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .recomhotel-header > div{
        width: 170px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .recomhotel-header > div > span{
        margin-top: -10px;
    }
    .recomhotel-header > div:nth-child(1){
        margin-left: 34px;
    }
    .recomhotel-header > div:nth-child(2){
        margin-left: 20px;
    }
    .recomhotel-header-bottom-true{
        background: url("../../../../assets/jdtjbtn02.png");
        background-size: 100% 100%;
    }
    .recomhotel-header-bottom-false{
        background: url("../../../../assets/jdtjbtn01.png");
        background-size: 100% 100%;
    }
    .recomhotel-body{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /*美食推荐列表*/
    .recomhotel-body > div{
        width: 680px;
        height: 260px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    /*左侧插图*/
    .recomhotel-body > div > img{
        width: 220px;
        height: 220px;
        border-radius: 20px;
    }
    /*右侧文字描述*/
    .recomhotel-body > div > div{
        width: 430px;
        height: 220px;
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .recomhotel-main-list-bottom{
        height: 50px;
        width: 430px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .recomhotel-main-list > div:nth-child(1){
        height: 56px;
        line-height: 56px;
        font-size: 30px;
        color: #333333;
    }
    .recomhotel-main-list > div:nth-child(2){
        height: 60px;
        line-height: 60px;
        font-size: 26px;
        color: #333333;
    }
    .recomhotel-main-list > div:nth-child(3){
        height: 46px;
        display: flex;
        align-items: center;
        height: 40px;
    }
    .recomhotel-main-list > div:nth-child(3) > span{
        height: 20px;
        margin-left: 10px;
        font-size: 16px;
        color: #333333;
    }
    .recomhotel-main-list-bottom > p:nth-child(1){
        font-size: 20px;
        color: #989898;
    }
    .recomhotel-main-list-bottom > p:nth-child(2){
        font-size: 20px;
        color: #333333;
    }
    .recomhotel-main-list-bottom > p:nth-child(2) > span{
        font-size: 28px;
        color: #f77754;
    }
</style>
